window.onload = () => {
    const $count = getElem('.count')
    const $time = getElem('.time')
    const $pause = getElem('.pause')
    const $end = getElem('.end')
    const $start = getElem('.start')
    const $restart = getElem('.restart')
    const $bg = getElem('.bg')
    // offsetWidth返回标签的宽度
    let timeWidth = $time.offsetWidth, flag = false, timeLess, core = 0, showWolf, lastPos = ''
    let wolfPosition = [
        {
            left: '96px',
            top: '115px'
        },
        {
            left: '184px',
            top: '142px'
        },
        {
            left: '17px',
            top: '160px'
        },
        {
            left: '195px',
            top: '211px'
        },
        {
            left: '204px',
            top: '295px'
        },
        {
            left: '117px',
            top: '273px'
        },
        {
            left: '101px',
            top: '191px'
        },
        {
            left: '15px',
            top: '220px'
        },
        {
            left: '26px',
            top: '294px'
        }
    ]

    function getElem (value) {
        return document.querySelector(value)
    }

    let wolf = () => {
        let wolfItem = document.createElement('img')
        // 判断是小灰灰还是灰太狼
        let num = Math.random()
        if (num > 0.7) {
            wolfItem.who = 'x'
        } else {
            wolfItem.who = 'h'
        }
        // 狼的位置随机
        wolfItem.style.position = 'absolute'
        let num1 = Math.floor(Math.random() * wolfPosition.length)
        // wolfItem.src = './assets/img/h5.png'
        wolfItem.style.top = wolfPosition[num1].top
        wolfItem.style.left = wolfPosition[num1].left
        // 判断当前图片的位置和上一张图片的位置是否相同，如果相同则return。否则就记录这次的位置。
        if (lastPos == wolfItem.style.left) {
            return
        } else {
            lastPos = wolfItem.style.left
        }
        $bg.appendChild(wolfItem)

        // 狼上升定时器
        let numUp = 0
        wolfItem.upTime = setInterval(() => {
             wolfItem.src = `./assets/img/${wolfItem.who}${numUp++}.png`
             if (numUp > 5) {
                 clearInterval(wolfItem.upTime)
             }
         }, 50)
        // 狼下降定时器
        wolfItem.waitTime = setTimeout(() => {
            let numDown = 5
            wolfItem.downTime = setInterval(() => {
                wolfItem.src = `./assets/img/${wolfItem.who}${numDown--}.png`
                if (numDown < 0) {
                    clearInterval(wolfItem.downTime)
                    $bg.removeChild(wolfItem)
                }
            }, 50)
        }, 1000)
        // 狼被敲打的事件
        wolfItem.onclick = () => {
            clearInterval(wolfItem.upTime)
            clearInterval(wolfItem.downTime)
            clearTimeout(wolfItem.waitTime)

            let numClick = 6
            wolfItem.clickTime = setInterval(() => {
                wolfItem.src = `./assets/img/${wolfItem.who}${numClick++}.png`
                if (numClick > 9) {
                    clearInterval(wolfItem.clickTime)
                    $bg.removeChild(wolfItem)
                }
            }, 50)
            if (wolfItem.who == 'x' && core > 0) {
                core -= 10
            } else if (wolfItem.who == 'h') {
                core += 10
            } else if (core < 0) {
                core = 0
            }
            $count.innerHTML = core
        }
    }

    let setTime = function () {
        timeLess = setInterval(() => {
            timeWidth -= 2
            $time.style.width = timeWidth + 'px'
            if (timeWidth <= 0) {
                clearInterval(timeLess)
                clearInterval(showWolf)
                $end.style.display = 'block'
                $end.innerHTML = `游戏结束，您的最终得分是${core}`
                $restart.style.display = 'block'
                $count.innerHTML = '0'
                timeWidth = 180
            }
        }, 200)
    }

    // 开始按钮点击事件
    $start.onclick = () => {
        $start.style.display = 'none'
        $pause.style.display = 'block'
        // 时间进度条
        setTime()
        showWolf = setInterval(() => {
            wolf()
        }, 500)
    }

    // 暂停按钮
    $pause.onclick = () => {
        flag = !flag
        if (flag) {
            clearInterval(timeLess)
            clearInterval(showWolf)
        } else {
            setTime()
            showWolf = setInterval(() => {
                wolf()
            }, 500)
        }
    }

    // 重新开始按钮
    $restart.onclick = function () {
        $restart.style.display = 'none'
        $end.style.display = 'none'
        $pause.style.display = 'block'
        core = 0
        lastPos = ''
        setTime()
        showWolf = setInterval(() => {
            wolf()
        }, 500)
    }
}